<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>相册集 - 我的相册</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: #f8f9fa;
            color: #333;
        }
        
        /* 顶部导航 */
        .top-nav {
            background-color: white;
            padding: 12px 16px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
        }
        
        .nav-back {
            color: #333;
            text-decoration: none;
            font-size: 20px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .nav-actions {
            display: flex;
            gap: 10px;
        }
        
        .nav-action {
            color: #333;
            text-decoration: none;
            font-size: 20px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }
        
        /* 筛选栏 */
        .filter-bar {
            padding: 12px 16px;
            background-color: white;
            margin-top: 56px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .filter-tabs {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            padding-bottom: 4px;
            scrollbar-width: none;
        }
        
        .filter-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .filter-tab {
            font-size: 15px;
            color: #666;
            text-decoration: none;
            white-space: nowrap;
            padding: 4px 0;
            position: relative;
        }
        
        .filter-tab.active {
            color: #2196f3;
            font-weight: 500;
        }
        
        .filter-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #2196f3;
            border-radius: 2px;
        }
        
        .view-options {
            display: flex;
            gap: 10px;
        }
        
        .view-option {
            color: #666;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            background-color: #f5f5f5;
        }
        
        .view-option.active {
            color: white;
            background-color: #2196f3;
        }
        
        /* 相册列表容器 */
        .albums-container {
            padding: 16px;
        }
        
        /* 相册标题 */
        .section-title {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .section-title a {
            font-size: 14px;
            color: #2196f3;
            font-weight: normal;
        }
        
        /* 网格布局相册 */
        .albums-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 24px;
        }
        
        /* 列表布局相册 */
        .albums-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 24px;
            display: none;
        }
        
        /* 时间轴布局相册 */
        .albums-timeline {
            position: relative;
            margin-bottom: 24px;
            display: none;
        }
        
        .albums-timeline::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 40px;
            width: 2px;
            background-color: #eee;
        }
        
        /* 相册卡片基础样式 */
        .album-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            text-decoration: none;
            color: #333;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .album-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        /* 网格布局卡片样式 */
        .grid-album {
            display: flex;
            flex-direction: column;
        }
        
        .album-cover {
            position: relative;
            width: 100%;
            aspect-ratio: 1;
            overflow: hidden;
        }
        
        .album-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .album-card:hover .album-cover img {
            transform: scale(1.05);
        }
        
        .photo-count {
            position: absolute;
            top: 8px;
            right: 8px;
            background-color: rgba(0,0,0,0.5);
            color: white;
            font-size: 12px;
            padding: 2px 6px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .album-info {
            padding: 10px;
        }
        
        .album-title {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .album-date {
            font-size: 12px;
            color: #999;
        }
        
        /* 列表布局卡片样式 */
        .list-album {
            display: flex;
            padding: 10px;
        }
        
        .list-album .album-cover {
            width: 80px;
            height: 80px;
            flex-shrink: 0;
            aspect-ratio: auto;
        }
        
        .list-album .album-info {
            flex: 1;
            padding: 0 12px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .list-album .album-title {
            font-size: 16px;
            margin-bottom: 6px;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }
        
        .list-album .album-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .album-description {
            font-size: 13px;
            color: #666;
            margin-bottom: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* 时间轴布局卡片样式 */
        .timeline-album {
            padding-left: 80px;
            padding-bottom: 24px;
            position: relative;
        }
        
        .timeline-album:last-child {
            padding-bottom: 12px;
        }
        
        .timeline-date {
            position: absolute;
            left: 0;
            top: 0;
            width: 70px;
            font-size: 14px;
            color: #666;
            text-align: right;
            padding-right: 16px;
        }
        
        .timeline-dot {
            position: absolute;
            left: 39px;
            top: 6px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #2196f3;
            border: 3px solid white;
            z-index: 1;
        }
        
        .timeline-album .album-cover {
            aspect-ratio: 16/9;
        }
        
        .timeline-album .album-info {
            padding: 12px 10px 0;
        }
        
        .timeline-album .album-title {
            font-size: 16px;
            margin-bottom: 6px;
        }
        
        /* 精选照片流 */
        .featured-photos {
            margin-bottom: 24px;
        }
        
        .photos-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 3px;
        }
        
        .photo-item {
            aspect-ratio: 1;
            overflow: hidden;
            position: relative;
        }
        
        .photo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .photo-item:hover img {
            transform: scale(1.1);
        }
        
        .photo-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            color: white;
            font-size: 14px;
        }
        
        .photo-item:hover .photo-overlay {
            opacity: 1;
        }
        
        /* 底部操作栏 */
        .bottom-action {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: #2196f3;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
            text-decoration: none;
            z-index: 90;
            transition: transform 0.2s;
        }
        
        .bottom-action:hover {
            transform: scale(1.05);
            color: white;
        }
        
        /* 创建相册弹窗 */
        .modal-backdrop {
            z-index: 1050;
        }
        
        .modal-content {
            border-radius: 16px;
            border: none;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            margin: 20px;
        }
        
        .modal-header {
            border-bottom: none;
            padding: 20px 20px 10px;
        }
        
        .modal-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .modal-footer {
            border-top: none;
            padding: 10px 20px 20px;
            gap: 10px;
        }
        
        .form-control {
            border-radius: 8px;
            padding: 12px 14px;
            font-size: 15px;
            border-color: #eee;
        }
        
        .form-control:focus {
            border-color: #2196f3;
            box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
        }
        
        .btn {
            padding: 10px 20px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
        }
        
        .btn-primary {
            background-color: #2196f3;
            border-color: #2196f3;
        }
        
        .btn-secondary {
            background-color: #f5f5f5;
            color: #333;
            border-color: #f5f5f5;
        }
        
        /* 空状态 */
        .empty-state {
            padding: 80px 20px;
            text-align: center;
            color: #999;
        }
        
        .empty-state i {
            font-size: 60px;
            margin-bottom: 15px;
            color: #eee;
        }
        
        /* 切换布局时的动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .album-card {
            animation: fadeIn 0.3s ease forwards;
        }
        
        .album-card:nth-child(2n) {
            animation-delay: 0.1s;
        }
        
        .album-card:nth-child(3n) {
            animation-delay: 0.2s;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <a href="#" class="nav-back">
            <i class="fas fa-arrow-left"></i>
        </a>
        <div class="nav-title">我的相册</div>
        <div class="nav-actions">
            <a href="#" class="nav-action">
                <i class="fas fa-search"></i>
            </a>
            <a href="#" class="nav-action" data-bs-toggle="modal" data-bs-target="#albumSettingsModal">
                <i class="fas fa-ellipsis-v"></i>
            </a>
        </div>
    </div>
    
    <!-- 筛选栏 -->
    <div class="filter-bar">
        <div class="filter-tabs">
            <a href="#" class="filter-tab active">全部相册</a>
            <a href="#" class="filter-tab">个人相册</a>
            <a href="#" class="filter-tab">共享相册</a>
            <a href="#" class="filter-tab">收藏相册</a>
            <a href="#" class="filter-tab">最近添加</a>
        </div>
        <div class="view-options">
            <a href="#" class="view-option active" id="grid-view">
                <i class="fas fa-th"></i>
            </a>
            <a href="#" class="view-option" id="list-view">
                <i class="fas fa-list"></i>
            </a>
            <a href="#" class="view-option" id="timeline-view">
                <i class="fas fa-stream"></i>
            </a>
        </div>
    </div>
    
    <!-- 相册列表容器 -->
    <div class="albums-container">
        <!-- 精选照片 -->
        <div class="featured-photos">
            <div class="section-title">
                精选照片
                <a href="#">查看全部</a>
            </div>
            <div class="photos-grid">
                <div class="photo-item">
                    <img src="https://picsum.photos/id/237/300/300" alt="照片">
                    <div class="photo-overlay">
                        <i class="fas fa-heart"></i>
                    </div>
                </div>
                <div class="photo-item">
                    <img src="https://picsum.photos/id/238/300/300" alt="照片">
                    <div class="photo-overlay">
                        <i class="fas fa-heart"></i>
                    </div>
                </div>
                <div class="photo-item">
                    <img src="https://picsum.photos/id/239/300/300" alt="照片">
                    <div class="photo-overlay">
                        <i class="fas fa-heart"></i>
                    </div>
                </div>
                <div class="photo-item">
                    <img src="https://picsum.photos/id/240/300/300" alt="照片">
                    <div class="photo-overlay">
                        <i class="fas fa-heart"></i>
                    </div>
                </div>
                <div class="photo-item">
                    <img src="https://picsum.photos/id/241/300/300" alt="照片">
                    <div class="photo-overlay">
                        <i class="fas fa-heart"></i>
                    </div>
                </div>
                <div class="photo-item">
                    <img src="https://picsum.photos/id/242/300/300" alt="照片">
                    <div class="photo-overlay">
                        <i class="fas fa-heart"></i>
                    </div>
                </div>
                <div class="photo-item">
                    <img src="https://picsum.photos/id/243/300/300" alt="照片">
                    <div class="photo-overlay">
                        <i class="fas fa-heart"></i>
                    </div>
                </div>
                <div class="photo-item">
                    <img src="https://picsum.photos/id/244/300/300" alt="照片">
                    <div class="photo-overlay">
                        <i class="fas fa-heart"></i>
                    </div>
                </div>
                <div class="photo-item">
                    <img src="https://picsum.photos/id/245/300/300" alt="照片">
                    <div class="photo-overlay">
                        <i class="fas fa-heart"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 我的相册 - 网格布局 -->
        <div class="my-albums">
            <div class="section-title">
                我的相册
                <a href="#" data-bs-toggle="modal" data-bs-target="#createAlbumModal">创建相册</a>
            </div>
            
            <!-- 网格布局容器 -->
            <div class="albums-grid" id="albums-grid-container">
                <!-- 相册1 -->
                <a href="#" class="album-card grid-album">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/10/600/600" alt="旅行相册">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 24
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">夏日海边之旅</div>
                        <div class="album-date">2023年7月</div>
                    </div>
                </a>
                
                <!-- 相册2 -->
                <a href="#" class="album-card grid-album">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/20/600/600" alt="生日聚会">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 18
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">25岁生日派对</div>
                        <div class="album-date">2023年5月</div>
                    </div>
                </a>
                
                <!-- 相册3 -->
                <a href="#" class="album-card grid-album">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/30/600/600" alt="美食相册">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 32
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">舌尖上的美食</div>
                        <div class="album-date">2023年全年</div>
                    </div>
                </a>
                
                <!-- 相册4 -->
                <a href="#" class="album-card grid-album">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/40/600/600" alt="宠物相册">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 45
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">我家毛孩子的日常</div>
                        <div class="album-date">2022-2023年</div>
                    </div>
                </a>
                
                <!-- 相册5 -->
                <a href="#" class="album-card grid-album">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/50/600/600" alt="工作相册">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 12
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">项目成果展示</div>
                        <div class="album-date">2023年6月</div>
                    </div>
                </a>
                
                <!-- 相册6 -->
                <a href="#" class="album-card grid-album">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/60/600/600" alt="风景相册">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 28
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">城市夜景合集</div>
                        <div class="album-date">2023年4月</div>
                    </div>
                </a>
            </div>
            
            <!-- 列表布局容器 -->
            <div class="albums-list" id="albums-list-container">
                <!-- 相册1 -->
                <a href="#" class="album-card list-album">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/10/600/600" alt="旅行相册">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 24
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">夏日海边之旅</div>
                        <div class="album-description">记录了在三亚的美好假期，阳光、沙滩和海浪</div>
                        <div class="album-meta">
                            <div class="album-date">2023年7月</div>
                            <i class="fas fa-chevron-right" style="color: #ddd;"></i>
                        </div>
                    </div>
                </a>
                
                <!-- 相册2 -->
                <a href="#" class="album-card list-album">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/20/600/600" alt="生日聚会">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 18
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">25岁生日派对</div>
                        <div class="album-description">和朋友们一起庆祝生日，收到了很多祝福和礼物</div>
                        <div class="album-meta">
                            <div class="album-date">2023年5月</div>
                            <i class="fas fa-chevron-right" style="color: #ddd;"></i>
                        </div>
                    </div>
                </a>
                
                <!-- 相册3 -->
                <a href="#" class="album-card list-album">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/30/600/600" alt="美食相册">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 32
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">舌尖上的美食</div>
                        <div class="album-description">一年来品尝过的各种美食，记录生活中的小确幸</div>
                        <div class="album-meta">
                            <div class="album-date">2023年全年</div>
                            <i class="fas fa-chevron-right" style="color: #ddd;"></i>
                        </div>
                    </div>
                </a>
                
                <!-- 相册4 -->
                <a href="#" class="album-card list-album">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/40/600/600" alt="宠物相册">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 45
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">我家毛孩子的日常</div>
                        <div class="album-description">记录我家猫咪"煤球"的成长瞬间和搞笑日常</div>
                        <div class="album-meta">
                            <div class="album-date">2022-2023年</div>
                            <i class="fas fa-chevron-right" style="color: #ddd;"></i>
                        </div>
                    </div>
                </a>
                
                <!-- 相册5 -->
                <a href="#" class="album-card list-album">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/50/600/600" alt="工作相册">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 12
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">项目成果展示</div>
                        <div class="album-description">上半年重点项目的成果展示和团队合影</div>
                        <div class="album-meta">
                            <div class="album-date">2023年6月</div>
                            <i class="fas fa-chevron-right" style="color: #ddd;"></i>
                        </div>
                    </div>
                </a>
                
                <!-- 相册6 -->
                <a href="#" class="album-card list-album">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/60/600/600" alt="风景相册">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 28
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">城市夜景合集</div>
                        <div class="album-description">用镜头捕捉城市夜晚的美丽瞬间和灯光璀璨</div>
                        <div class="album-meta">
                            <div class="album-date">2023年4月</div>
                            <i class="fas fa-chevron-right" style="color: #ddd;"></i>
                        </div>
                    </div>
                </a>
            </div>
            
            <!-- 时间轴布局容器 -->
            <div class="albums-timeline" id="albums-timeline-container">
                <!-- 相册1 -->
                <div class="album-card timeline-album">
                    <div class="timeline-date">2023年7月</div>
                    <div class="timeline-dot"></div>
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/10/600/600" alt="旅行相册">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 24
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">夏日海边之旅</div>
                        <div class="album-description">记录了在三亚的美好假期，阳光、沙滩和海浪</div>
                    </div>
                </div>
                
                <!-- 相册2 -->
                <div class="album-card timeline-album">
                    <div class="timeline-date">2023年6月</div>
                    <div class="timeline-dot"></div>
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/50/600/600" alt="工作相册">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 12
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">项目成果展示</div>
                        <div class="album-description">上半年重点项目的成果展示和团队合影</div>
                    </div>
                </div>
                
                <!-- 相册3 -->
                <div class="album-card timeline-album">
                    <div class="timeline-date">2023年5月</div>
                    <div class="timeline-dot"></div>
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/20/600/600" alt="生日聚会">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 18
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">25岁生日派对</div>
                        <div class="album-description">和朋友们一起庆祝生日，收到了很多祝福和礼物</div>
                    </div>
                </div>
                
                <!-- 相册4 -->
                <div class="album-card timeline-album">
                    <div class="timeline-date">2023年4月</div>
                    <div class="timeline-dot"></div>
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/60/600/600" alt="风景相册">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 28
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">城市夜景合集</div>
                        <div class="album-description">用镜头捕捉城市夜晚的美丽瞬间和灯光璀璨</div>
                    </div>
                </div>
                
                <!-- 相册5 -->
                <div class="album-card timeline-album">
                    <div class="timeline-date">2023年全年</div>
                    <div class="timeline-dot"></div>
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/30/600/600" alt="美食相册">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 32
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">舌尖上的美食</div>
                        <div class="album-description">一年来品尝过的各种美食，记录生活中的小确幸</div>
                    </div>
                </div>
                
                <!-- 相册6 -->
                <div class="album-card timeline-album">
                    <div class="timeline-date">2022-2023年</div>
                    <div class="timeline-dot"></div>
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/40/600/600" alt="宠物相册">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 45
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">我家毛孩子的日常</div>
                        <div class="album-description">记录我家猫咪"煤球"的成长瞬间和搞笑日常</div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 共享相册 -->
        <div class="shared-albums">
            <div class="section-title">
                共享相册
                <a href="#">查看全部</a>
            </div>
            
            <div class="albums-grid">
                <!-- 共享相册1 -->
                <a href="#" class="album-card grid-album">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/70/600/600" alt="公司团建">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 56
                        </div>
                        <div style="position: absolute; top: 8px; left: 8px; background-color: rgba(0,0,0,0.5); color: white; font-size: 12px; padding: 2px 6px; border-radius: 10px;">
                            <i class="fas fa-users"></i> 12人
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">公司团建活动</div>
                        <div class="album-date">2023年3月</div>
                    </div>
                </a>
                
                <!-- 共享相册2 -->
                <a href="#" class="album-card grid-album">
                    <div class="album-cover">
                        <img src="https://picsum.photos/id/80/600/600" alt="同学聚会">
                        <div class="photo-count">
                            <i class="fas fa-image"></i> 34
                        </div>
                        <div style="position: absolute; top: 8px; left: 8px; background-color: rgba(0,0,0,0.5); color: white; font-size: 12px; padding: 2px 6px; border-radius: 10px;">
                            <i class="fas fa-users"></i> 8人
                        </div>
                    </div>
                    <div class="album-info">
                        <div class="album-title">大学同学聚会</div>
                        <div class="album-date">2023年2月</div>
                    </div>
                </a>
            </div>
        </div>
    </div>
    
    <!-- 底部创建按钮 -->
    <a href="#" class="bottom-action" data-bs-toggle="modal" data-bs-target="#createAlbumModal">
        <i class="fas fa-plus"></i>
    </a>
    
    <!-- 创建相册弹窗 -->
    <div class="modal fade" id="createAlbumModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">创建新相册</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="albumName" class="form-label">相册名称</label>
                        <input type="text" class="form-control" id="albumName" placeholder="输入相册名称">
                    </div>
                    <div class="mb-3">
                        <label for="albumDescription" class="form-label">相册描述</label>
                        <textarea class="form-control" id="albumDescription" rows="3" placeholder="描述一下这个相册..."></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">相册封面</label>
                        <div class="d-flex gap-3 mt-2">
                            <div style="width: 60px; height: 60px; border-radius: 6px; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; color: #999; cursor: pointer;">
                                <i class="fas fa-camera"></i>
                            </div>
                            <div style="width: 60px; height: 60px; border-radius: 6px; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; color: #999; cursor: pointer;">
                                <i class="fas fa-image"></i>
                            </div>
                        </div>
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="makePublic">
                        <label class="form-check-label" for="makePublic">设为公开相册</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary">创建相册</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 相册设置弹窗 -->
    <div class="modal fade" id="albumSettingsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body" style="padding: 0;">
                    <div style="padding: 16px; border-bottom: 1px solid #eee;">
                        <a href="#" style="display: flex; align-items: center; color: #333; text-decoration: none; gap: 12px;">
                            <i class="fas fa-sliders-h" style="font-size: 18px; color: #666;"></i>
                            <span>相册设置</span>
                        </a>
                    </div>
                    <div style="padding: 16px; border-bottom: 1px solid #eee;">
                        <a href="#" style="display: flex; align-items: center; color: #333; text-decoration: none; gap: 12px;">
                            <i class="fas fa-cloud-upload-alt" style="font-size: 18px; color: #666;"></i>
                            <span>批量上传照片</span>
                        </a>
                    </div>
                    <div style="padding: 16px; border-bottom: 1px solid #eee;">
                        <a href="#" style="display: flex; align-items: center; color: #333; text-decoration: none; gap: 12px;">
                            <i class="fas fa-folder-plus" style="font-size: 18px; color: #666;"></i>
                            <span>新建相册</span>
                        </a>
                    </div>
                    <div style="padding: 16px; color: #ff4d4f;">
                        <a href="#" style="display: flex; align-items: center; color: inherit; text-decoration: none; gap: 12px;">
                            <i class="fas fa-question-circle" style="font-size: 18px;"></i>
                            <span>帮助与反馈</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 布局切换功能
            const gridViewBtn = document.getElementById('grid-view');
            const listViewBtn = document.getElementById('list-view');
            const timelineViewBtn = document.getElementById('timeline-view');
            
            const gridContainer = document.getElementById('albums-grid-container');
            const listContainer = document.getElementById('albums-list-container');
            const timelineContainer = document.getElementById('albums-timeline-container');
            
            // 切换到网格布局
            gridViewBtn.addEventListener('click', function(e) {
                e.preventDefault();
                setActiveView(this);
                gridContainer.style.display = 'grid';
                listContainer.style.display = 'none';
                timelineContainer.style.display = 'none';
            });
            
            // 切换到列表布局
            listViewBtn.addEventListener('click', function(e) {
                e.preventDefault();
                setActiveView(this);
                gridContainer.style.display = 'none';
                listContainer.style.display = 'flex';
                timelineContainer.style.display = 'none';
            });
            
            // 切换到时间轴布局
            timelineViewBtn.addEventListener('click', function(e) {
                e.preventDefault();
                setActiveView(this);
                gridContainer.style.display = 'none';
                listContainer.style.display = 'none';
                timelineContainer.style.display = 'block';
            });
            
            // 设置当前激活的视图按钮
            function setActiveView(btn) {
                document.querySelectorAll('.view-option').forEach(option => {
                    option.classList.remove('active');
                });
                btn.classList.add('active');
            }
            
            // 筛选标签切换
            const filterTabs = document.querySelectorAll('.filter-tab');
            filterTabs.forEach(tab => {
                tab.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    filterTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 模拟筛选效果
                    simulateLoading();
                });
            });
            
            // 模拟加载效果
            function simulateLoading() {
                const albumsContainer = document.querySelector('.albums-container');
                albumsContainer.style.opacity = '0.5';
                
                setTimeout(() => {
                    albumsContainer.style.opacity = '1';
                }, 500);
            }
            
            // 照片点击效果
            const photoItems = document.querySelectorAll('.photo-item');
            photoItems.forEach(item => {
                item.addEventListener('click', function() {
                    const img = this.querySelector('img').src;
                    // 在实际应用中，这里会打开照片预览模态框
                    console.log('查看照片:', img);
                });
            });
            
            // 创建相册表单提交
            const createAlbumBtn = document.querySelector('#createAlbumModal .btn-primary');
            createAlbumBtn.addEventListener('click', function() {
                const albumName = document.getElementById('albumName').value;
                if (albumName.trim()) {
                    // 关闭模态框
                    const modal = bootstrap.Modal.getInstance(document.getElementById('createAlbumModal'));
                    modal.hide();
                    
                    // 模拟创建成功提示
                    alert(`相册"${albumName}"创建成功！`);
                    
                    // 清空表单
                    document.getElementById('albumName').value = '';
                    document.getElementById('albumDescription').value = '';
                } else {
                    alert('请输入相册名称');
                }
            });
        });
    </script>
</body>
</html>

